@import "base";
@import "main";

#video-list {
  margin-top: 72px;
  overflow: hidden;
  div {
    float: left;
    width: 280px;
    margin-right: 64px;
    margin-bottom: 64px;
    padding-bottom: 4px;
    background-color: #34434B;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    overflow: hidden;
    text-align: left;
    a {
      &:hover img{
        opacity: .8;
        filter: alpha(opacity=50);
      }
      hr {
        width: 93%;
        margin: 2px auto;
        height: 1px;
        border: none;
        border-top: 1px solid #677a83;
        opacity: .9;
        filter:alpha(opacity=90);
        clear: both;
      }
      img{
        width: 280px;
        height: 220px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: none;
      }
      p {
        padding: 8px 4px;
        display: inline-block;
        color: #fff;
        font-size: 14px;
      }
      p.title {
        margin-left: 8px;
        font-weight: normal;
        font-size: 12px;
        letter-spacing: 3px;
      }
      p.author {
        color: #ACBEC5;
        letter-spacing: 1px;
        opacity:.8;
        filter:alpha(opacity=80);
        float: right;
        font-size: 12px;
        margin-right: 8px;
      }
      p.hot {
        margin-left: 12px;
        font-size:  12px;
        color: #ACBEC5;
        padding: 4px 8px;
        margin-top:6px;
        margin-bottom:6px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        background-color: #3C4F57;
      }
    }
  }
}
